<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Order Search</title>

<link href="../resources/css/ligerui-all.css" rel="stylesheet" type="text/css" />
 <link href="../resources/css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet"  type="text/css" />
 
<script src="../resources/js/jquery-1.9.1.min.js" type="text/javascript"></script> 
<script src="../resources/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
<script src="../resources/js/ligerui.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
        var manager;
        $(function(){
        	
			manager = $("#maingrid").ligerGrid({
                columns: [
                { display: '订单ID', name: 'orderHeaderId', width: 50, frozen: true, isSort: false },
                { display: '订单编号', name: 'documentNumber', width: 250, frozen: true, isSort: false, render: function (rowdata, rowindex, value)
					{	
						var h =  "<a href='javascript:showOrderDetails()'>"+ value +"</a> ";
						return h;
					}
				},
                { display: '下单时间', width: 80, name: 'orderDate', isSort: false},
				{ display: '订单类型', name: 'orderCategory', width: 80, isSort: false},
                { display: '商品数量', name: 'amount', width: 80, isSort: false},
				{ display: '订单总价（元）', name: 'orderTotalPrice', width: 100, isSort: false},
				{ display: '实际订单总价（元）', name: 'actualTotalPrice', width: 150, isSort: false},
				{ display: '订单状态', name: 'orderStatus', width: 100, isSort: false},
				{ display: '用餐时间', name: 'mealTime', width: 150, isSort: false},
				{ display: '座位号', name: 'diningTableName', width: 150, isSort: false},
				{ display: '外送地址', name: 'deliveryAddress', width: 200, isSort: false},
				{ display: '服务员', name: 'attn', width: 80, isSort: false},
				{ display: '会员账号', name: 'memberNo', width: 100, isSort: false},
				{ display: '会员姓名', name: 'memberName', width: 100, isSort: false},
				{ display: '备注', name: 'remark', width: 200, isSort: false}],
                url : "list",
                pageSizeOptions: [5, 10, 20, 25, 30],
                enabledEdit: false,clickToEdit:false, isScroll: false,
                width: '99.5%'
            });   
			
			/**日期控件**/
			$("#orderDate").ligerDateEditor({width : 180 });
			
			//$("form").ligerForm();
			
        });
		
		/**查看订单明细**/
		function showOrderDetails() {
			var row = manager.getSelectedRow();
            var jsonRow = JSON.stringify(row);
			var url = "showOrOperate/orderDetailsOperate?orderHeader=" + jsonRow;
			location.href = url;
		}
		
		$(function(){
			$("input[name=submit]").click(function(){
				var orderMsg= $("form[name=orderAction]").serializeArray();
				var jsonMsg = "{"
				for(var i = 0; i < orderMsg.length; i++) {
					jsonMsg = jsonMsg + orderMsg[i].name + ": '" + orderMsg[i].value + "', ";
				}
				jsonMsg = jsonMsg.substr(0, jsonMsg.length-2);
				jsonMsg = jsonMsg + "}";
				var url = "list?orderMsg=" + jsonMsg;
				$.post("list?orderMsg=" + jsonMsg, {'page': 1, 'pagesize': 10}, function(data){
					manager.loadData(data);
					manager.setOptions({'url': url, 'pageSizeOptions': [5, 10, 20, 25, 30], 'page':1, 'pagesize': 10} );
				});
			});
		});
		
		/**当鼠标移动到select上时触发该事件，生产select的option**/
		function addOption(id) {//鼠标进来时select列表已经生产好了
			var index = $("#" + id + " option:last").prop("index"); //最后一个option的索引
			if(index == 0) {
				$.get("conditions/"+ id, function(data){
					var lists = eval(data);
					for(var i = 0; i < lists.length; i++) {
						var dtys = lists[i];
						$("#" + id).append("<option value='" + dtys.dictionaryId + "'>" + dtys.categoryName + "</option>");
					}		
				});
			}
		}
    </script>
    <style type="text/css">  
		a:link {color: blue; text-decoration:none;}   
		a:active:{color: red; }
		a:visited {color:purple;text-decoration:none;} 
		a:hover {color: red; text-decoration: underline;} 
		input, textarea, select{border:none; background:none; padding:.2em; margin:.2em 0; vertical-align:middle; margin-left:.4em;}
		.t_head{ width:100px; text-align:right;} 
		.t_head_label{ margin-left:3px;}  
		.l-button-submit,.l-button-reset{width:80px; height:23px;  float:right; margin-right:10px; padding-bottom:10px;}
    </style>
</head>

<body style="margin-left: 2px;">  
	<div id="talBar"><span style=" margin: 5px 10px; display: block; font-weight: bold;">宝华茶餐厅 > 订单管理 > 订单查询${dtys }</span></div>
	<div id="searchItem">
	<form name="orderAction" id="orderAction" method="post">
    <!--查询条件：订单编号、下单时间、订单类型、订单状态、外送地址、座位号-->
    	<table border="0" cellpadding="0" cellspacing="1" width="100%">
        	<tr>
            	<td id="t_head" width="110px;" align="right" height="28px;"><label style="padding-right:5px;">订单编号：</label></td>
                <td width="250px"><input type="text" class='text ui-widget-content ui-corner-all' size="30" name="documentNumber" value=""/></td>
                <td id="t_head" width="110px;" align="right" class="l-table-edit-td"><label style="padding-right:5px;">订单类型：</label></td>
                <td width="250px">
                	<!-- <div style=" border-color: red; border-style: solid;" id="ocId" onmouseover="getSelect(this.id)"> -->
                	<select name="orderCategory" id="ORDER_CATEGORY" class='select ui-widget-content ui-corner-all' onmouseover="addOption(this.id)">
                		<option value="">======SELECTED======</option>
                	</select>
                	<!--</div>-->
                </td>
                <td id="t_head" width="110px;" align="right"><label style="padding-right:5px;">订单状态：</label></td>
                <td width="250px">
                	<select name="orderStatus" id="ORDER_STATUS" class='select ui-widget-content ui-corner-all' onmouseover="addOption(this.id)">
                		<option value="">======SELECTED======</option>
                	</select>
                </td>
            </tr>
            <tr>
            	<td id="t_head" width="110px;" align="right" height="28px;"><label style="padding-right:5px;">下单时间：</label></td>
                <td><div style="margin-left: .4em;"><input type="text" name="orderDate" id="orderDate" value=""/></div></td>
                <td id="t_head" width="110px;" align="right"><label style="padding-right:5px;">外送地址：</label></td>
                <td><input type="text" class='text ui-widget-content ui-corner-all' size="30" name="deliveryAddress" value="" /></td>
                <td id="t_head" width="110px;" align="right"><label style="padding-right:5px;">座&nbsp;&nbsp;位&nbsp;&nbsp;号：</label></td>
                <td><input type="text" class='text ui-widget-content ui-corner-all' size="30" name="diningTableName" value="" /></td>
            </tr>
            <tr>
            	<td colspan="4"></td>
                <td colspan="2" align="center">
                	<input type="reset" class="l-button l-button-reset" name="reset" value="清&nbsp;&nbsp;空" />
                	<input type="button" class="l-button l-button-submit" name="submit" value="查&nbsp;&nbsp;询" />
                    
                </td>
            </tr>
        </table>
    </form>
    </div>
    <div style="margin-bottom:5px; margin-top: 10px;"></div>
    <div id="maingrid"></div>
</body>
</html>